<template>
  <div>
    <el-row style="padding:20px;margin-top:20px">
      <el-col :span="24">
        <el-steps :active="step" style="margin-left:20%;font-size:39px;cursor:pointer;">
          <el-step title="步骤 1" style="text-align:center" icon="edit" description="添加事故的基本信息">
          </el-step>
          <el-step title="步骤 2" icon="edit" description="添加当事人">
          </el-step>
          <el-step title="步骤 3" icon="upload" description="添加图片和视频">
          </el-step>
        </el-steps>
      </el-col>
      <el-col v-if="step==1" :span="18" style="margin-top:30px;margin-left:10%">
        <el-form :model="form" :rules="rules" ref="form" label-width="200px" label-suffix="：">
          <el-form-item v-for="(v,k,i) in form" :label="labels[i]" v-if="k!=='trafficAccidentID'&&k!=='trafficAccidentEndDateTime'&&k!=='trafficAccidentStatusTypeValue'&&k!=='currentResponsiblePersonCertID'" :key="i" :prop="k">
            <el-select v-if="k=='trafficAccidentKind'||k=='netGridID'||k=='trafficAccidentTypeValue'||k=='trafficAccidentStatusTypeValue'" v-model="form[k]">
              <template v-if="k=='netGridID'">
                <el-option v-for="(n,i) of GridID" :value="n.netGridID" :label="n.netGridName" :key="i"></el-option>
              </template>
              <template v-else-if="k=='trafficAccidentTypeValue'">
                <el-option v-for="(n,i) of AccidentType" :value="n.trafficAccidentTypeValue" :label="n.trafficAccidentTypeName" :key="i"></el-option>
              </template>
              <template v-else-if="k=='trafficAccidentKind'">
                <el-option v-for="(n,i) of AccidentKind" :value="n.trafficAccidentKind" :label="n.trafficAccidentKindName" :key="i"></el-option>
              </template>
            </el-select>
            <el-switch v-else-if="k=='isEmergency'||k=='isImperative'" v-model="form[k]" on-color="#13ce66" off-color="#ff4949" :on-value="1" :off-value="0">
            </el-switch>
            <el-input type="textarea" v-else-if="k=='trafficAccidentContent'||k=='currentRemarks'" v-model="form[k]"></el-input>
            <el-date-picker type="datetime" v-else-if="k=='trafficAccidentStartDateTime'" v-model="form[k]"></el-date-picker>
            <!-- <el-date-picker v-else-if="k=='trafficAccidentEndDateTime'" @change="changeDate2" v-model="form[k]"></el-date-picker> -->
            <el-input v-else style="width:300px;" v-model="form[k]"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="20" align="center">
              <el-form-item>
                <el-button type="warning" @click="resetForm('form')">重置</el-button>
                <el-button type="primary" @click="saveForm('form')">{{button}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="18" style="margin-top:20px" v-else-if="step==2">
        <div style="margin-left:25%;">
          <fieldset>
            <legend style="font-size:20px">当事人列表</legend>
            <div v-for="(saform,i) in Forms" :key="saform.id" style="margin-top:10px;">
              <el-alert :title="'当事人('+(i+1)+')'" type="info" style="font-size:20px;font-weight:bold" :closable="false">
                <el-button type="danger" size="small" style="float:right" v-if="i!=Forms.length-1" @click="deletePerson(i)">删除</el-button>
              </el-alert>
              <div style="border:1px;background-color:whitesmoke;padding:5px;margin-top:10px">
                <el-form :model="saform" style="border:1px;margin-top:5px" label-width="120px" label-suffix="：">
                  <el-form-item v-for="(value,key,index) in saform" :key="index" v-if="key!=='trafficAccidentID'" :label="label[index]" :prop="key">
                    <el-input v-model="saform[key]"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="warning" v-if="i==Forms.length-1" @click="saveSAPerson">保存所有</el-button>
                    <el-button v-if="i==Forms.length-1" style="float:right" type="primary" @click="addSAPerson()"><i class="fa fa-plus fa-lg"></i> 新增当事人</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </fieldset>
        </div>
      </el-col>
      <el-col v-else-if="step==3" style="margin-top:30px;" :span="18">
        <div style="margin-left:25%">
          <h4>图片上传（支持多图）</h4>
          <el-upload class="upload-demo" :action="'http://223.112.65.198:9898/msmis/api/trafficAccident/addTrafficAccidentPicture?ID='+form.trafficAccidentID" :on-preview="handlePreview" :on-remove="handleRemove" :headers="header" :file-list="fileList2" list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
        <div style="margin-left:25%;margin-top:100px;">
          <h4>视频上传</h4>
          <el-upload class="upload-demo" drag :headers="header" :action="getDomain()+'/msmis/api/trafficAccident/addTrafficAccidentVideo?ID='+form.trafficAccidentID" multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="nextDiv">
          <i v-if="step==3" class="fa fa-history fa-5x" @click="submit"></i>
          <div v-if="step==3" class="directionFont" @click="submit">
            完成
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="事件派发" :visible.sync="visible">
      <fieldset style="width:625px;margin-left:160px;margin-bottom:20px">
        <legend>检索负责人</legend>
        <div style="margin-top:20px">
          <el-input v-model="filter.key" style="width:450px" placeholder="请输入负责人查询信息(输入姓名、身份证、电话、部门均可)"></el-input>
          <el-button type="primary" @click="search">查询</el-button>
        </div>
      </fieldset>
      <fieldset style="width:500px;margin-left:160px;margin-bottom:20px">
        <legend>事件派发单</legend>
        <el-form :model="form2" ref="form" label-width="80px" :rules="rules">
          <el-form-item label="派发者" style="width:600px" prop="userID">
            {{$store.getters.user.userName}}
          </el-form-item>
          <el-form-item label="负责人" style="width:600px">
            <el-input disabled v-model="result.nameB" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker v-model="form2.startTime" placeholder=""></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="form2.endTime" placeholder=""></el-date-picker>
          </el-form-item>
          <el-form-item label="备注" style="width:600px">
            <el-input type="textarea" v-model="form2.remark" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="paifa('form')">派发</el-button>
          </el-form-item>
        </el-form>
      </fieldset>
    </el-dialog>

    <el-dialog title="检索结果" :visible.sync="dialogVisible">
      <div>
        <el-table :data="memberInfo" border>
          <el-table-column prop="userID" label="编号"></el-table-column>
          <el-table-column prop="realName" label="真实姓名"></el-table-column>
          <el-table-column prop="certID" label="身份证"></el-table-column>
          <el-table-column prop="dept" label="所属部门"></el-table-column>
          <el-table-column label="选择">
            <template scope="scope">
              <input @click="selectMember(scope.row.realName,scope.row.userID)" type="radio" name="check">
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/trafficManage";
import * as api2 from "@/api/orgManage";
import * as api3 from "../../api/securityManage";
import { formatDateTime } from "@/utils/index";
import { getToken } from "../../utils/auth";
import * as socket from "@/api";

export default {
  data() {
    return {
      header: {
        token: getToken()
      },
      mytype: 2,
      flag: 0,
      button: "保存",
      step: 1,
      fileList2: [],
      form: {
        trafficAccidentID: "",
        trafficAccidentName: "",
        isEmergency: "",
        isImperative: "",
        trafficAccidentKind: "", //  int comment '交通事故性质，编码待定',
        trafficAccidentTypeValue: "", // char(2) comment '交通事故类型，待定',
        trafficAccidentContent: "", // varchar(1000) comment '交通事故内容描述',
        trafficAccidentStartDateTime: "", // datetime comment '交通事故开始时间',
        // trafficAccidentEndDateTime:'',// datetime comment '交通事故结束时间',
        trafficAccidentHappenLongitude: "", // double(32,8) comment '交通事故发生地 地理经度信息',
        trafficAccidentHappenLatitude: "", // double(32,8) comment '交通事故发生地  地理纬度信息',
        trafficAccidentStatusTypeValue: "", // char(2) comment '当前交通事故处理的最新状态',
        currentRemarks: "", //       varchar(1000) comment '当前处理交通事故备注',
        currentResponsiblePersonCertID: 1, // char(18) comment '当前经办人员身份证号',
        // currentResponsiblePersonName: "", // varchar(50) comment '当前经办人员姓名',
        // currentResponsiblePersonContact: "", // varchar(50) comment '经办人员联系方式',
        netGridID: "" //            bigint comment '事故发生地所属网格区域',
      },
      // ' 事故结束时间'
      labels: [
        "编号",
        "事故名称",
        "是否紧急任务",
        "是否强制派单",
        "事故性质",
        "事故类型",
        "事故内容描述",
        "事故开始时间",
        "事故发生经度",
        "事故发生纬度",
        "当前事故处理状态",
        "当前交通事故备注",
        "当前经办人身份证号码",
        // "当前经办人姓名",
        // "当前经办人联系方式",
        "事故发生网格"
      ],
      Forms: [
        {
          trafficAccidentID: "", //    bigint comment '交通事故ID',
          involvedPersonCertID: "", // char(18),
          involvedPersonName: "", //   varchar(50) comment '当事人姓名',
          involvedPersonRemark: "", // varchar(500) comment '当事人备注',
          involvedPersonContact: "" // varchar(50) comment '当事人号码',
        }
      ],
      label: [
        "交通事故编号",
        "当事人身份证",
        "当事人姓名",
        "当事人备注",
        "当事人号码"
      ],
      rules: {},
      GridID: [],
      AccidentKind: [],
      AccidentType: [],
      form2: {
        eventID: "",
        userID: 2, //        '派发任务的人的ID',
        acceptedUserID: "", // '接受任务人的用户ID号',
        startTime: "", //       datetime,
        endTime: "", //              datetime,
        remark: "" //               varchar(1000)
      },
      dialogVisible: false,
      visible: false,
      filter: {
        key: "",
        isPF:1
      },
      tempId: null,
      result: {
        nameA: "",
        nameB: ""
      },
      memberInfo: []
    };
  },
  methods: {
    cancel() {
      this.form2.acceptedUserID = this.tempId = null;
      this.dialogVisible = false;
    },
    sure() {
      this.form2.acceptedUserID = this.tempId;
      this.dialogVisible = false;
    },
    search() {
      this.dialogVisible = true;
      api3.getUserInfoByKey(this.filter).then(res => {
        this.memberInfo = res.data;
      });
    },
    selectMember(name, id) {
      this.result.nameB = name;
      this.tempId = id;
    },
    paifa() {
      this.form2.eventID = this.form.trafficAccidentID;
      if (
        this.form2.acceptedUserID !== "" &&
        this.form2.acceptedUserID !== null
      ) {
        this.$confirm("是否确认派发此事件,是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            api.addTrafficAccidentDistribute(this.form2).then(res => {
              if (res.code == 200) {
                api
                  .updateTrafficAccidentStatus("04", this.form2.eventID)
                  .then(res => {
                    if (res.code == 200) {
                      this.$message({
                        type: "success",
                        message: "派发成功！"
                      });
                      let that = this;
                      socket.send({
                        username: that.form2.acceptedUserID,
                        message: "有新的问题事件需要处理!"
                      });
                      this.visible = false;
                      this.$router.push("/trafficeventUp/index");
                    } else {
                      this.$message({
                        type: "error",
                        message: "派发失败"
                      });
                    }
                  });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消派发"
            });
          });
      }
    },
    getDomain() {
      return "http://" + window.location.host;
    },
    saveSAPerson() {
      for (let i = 0; i < this.Forms.length; i++) {
        this.Forms[i].trafficAccidentID = this.form.trafficAccidentID;
        api.addTrafficAccidentInvolvedPersons(this.Forms[i]).then(res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "当事人添加成功!"
            });
            this.step = 3;
          } else {
            this.$message({
              type: "error",
              message: res.message
            });
          }
        });
      }
    },
    deletePerson(i) {
      this.$message.error("删除成功！");
      this.Forms.splice(i, 1);
    },
    addSAPerson() {
      let obj = {
        trafficAccidentID: "", //    bigint comment '交通事故ID',
        involvedPersonCertID: "", // char(18),
        involvedPersonName: "", //   varchar(50) comment '当事人姓名',
        involvedPersonRemark: "", // varchar(500) comment '当事人备注',
        involvedPersonContact: "" // varchar(50) comment '当事人号码',
      };
      this.Forms.push(obj);
    },
    goPre() {
      this.flag = 0;
      if (this.step > 1) {
        this.step = this.step - 1;
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    resetForm(formName) {
      var ids = this.$store.getters.user.userID;
      this.form = {
        trafficAccidentID: "",
        trafficAccidentName: "",
        trafficAccidentKind: "", //  int comment '交通事故性质，编码待定',
        trafficAccidentTypeValue: "", // char(2) comment '交通事故类型，待定',
        trafficAccidentContent: "", // varchar(1000) comment '交通事故内容描述',
        trafficAccidentStartDateTime: "", // datetime comment '交通事故开始时间',
        // trafficAccidentEndDateTime:'',// datetime comment '交通事故结束时间',
        trafficAccidentHappenLongitude: "", // double(32,8) comment '交通事故发生地 地理经度信息',
        trafficAccidentHappenLatitude: "", // double(32,8) comment '交通事故发生地  地理纬度信息',
        trafficAccidentStatusTypeValue: "", // char(2) comment '当前交通事故处理的最新状态',
        currentRemarks: "", //       varchar(1000) comment '当前处理交通事故备注',
        currentResponsiblePersonCertID: ids, // char(18) comment '当前经办人员身份证号',
        // currentResponsiblePersonName: "", // varchar(50) comment '当前经办人员姓名',
        // currentResponsiblePersonContact: "", // varchar(50) comment '经办人员联系方式',
        netGridID: "" //            bigint comment '事故发生地所属网格区域',
      };
      this.flag == 0;
      this.$refs[formName].resetFields();
    },
    submit() {
      if (
        this.$store.getters.user.userRole == "超级管理员" ||
        this.$store.getters.user.userRole == "综治办"
      ) {
        this.visible = true;
      } else {
        this.$router.go(-1);
      }
    },
    saveForm(formName) {
      if (this.form.trafficAccidentStartDateTime !== "")
        this.form.trafficAccidentStartDateTime = formatDateTime(
          this.form.trafficAccidentStartDateTime
        );
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.form.currentResponsiblePersonCertID = this.$store.getters.user.userID;
          api.addTrafficAccidentBasic(this.form).then(res => {
            if (res.code == 200 && res.data != null) {
              this.form.trafficAccidentID = res.data;
              this.flag = 1;
              this.$message({
                type: "success",
                message: "添加成功!"
              });
              if (
                this.$store.getters.user.userRole == "超级管理员" ||
                this.$store.getters.user.userRole == "综治办"
              )
                api.updateTrafficAccidentStatus(
                  "01",
                  this.form.trafficAccidentID
                );
              this.step = 2;
            } else {
              this.$message({
                type: "error",
                message: res.message
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  mounted() {
    this.form2.userID = this.$store.getters.user.userID;
    api.fetchTrafficCodes().then(res => {
      this.AccidentKind = res.data.AccidentKind;
      this.AccidentType = res.data.AccidentType;
    });
    api2.getOrgCode().then(res => {
      this.GridID = res.data.netGrid;
    });
    if (this.flag == 0) {
      this.step = 1;
    }
  }
};
</script>


<style scoped>
.preDiv {
  position: fixed;
  top: 300px;
  left: 10%;
  cursor: pointer;
  color: #58b7ff;
  text-align: center;
  /* margin-left: 10px; */
}
.nextDiv {
  position: fixed;
  top: 300px;
  right: 0;
  cursor: pointer;
  color: #58b7ff;
  text-align: center;
  margin-right: 10px;
}
</style>
